{% extends "billing/layout.html" %}
{% block title %}
    Compare
{% endblock %}
{% block content %}
<div class="page-header">
    <h1>月度费用验证</h1>
</div>

<div id="bar" style="width:1000px; height:600px;"></div>
{% endblock %}

{% load static %}
{% block script %}
<script type="text/javascript" src="{% static 'echarts/themes/essos.js' %}"></script>
<script>
    var chart = echarts.init(document.getElementById('bar'), 'essos', {renderer: 'canvas'});

    $(function () {
        fetchData();
    });

    function fetchData() {
        $.ajax({
            type: "GET",
            url: "{% url 'billing:compare_monthly' %}",
            dataType: 'json',
            success: function (result) {
                chart.setOption(result.data);
            }
        });
    }
</script>
{% endblock %}